<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery DOM 操作</title>
    <style>
        .normal {
            font-size: 20px;
            font-weight: bolder;
            text-decoration: none;
        }
        #show {
            position: absolute;
        }
        .users {
            display: none;

        }
    </style>
    <script src="../static/js/jquery-3.3.1.js"></script>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div id="show">
        <a href="#">用户列表</a>
        <ul class="users">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    <img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
    <audio src=""></audio>
    <video src=""></video>
    <script>
        // 懒加载
        // 原生JS的懒加载方式
        window.onload = function () {
            //alert('1')
        }
        // jQuery 懒加载方式
        $(document).ready(function () {
            //alert('2')
        })
        // jQuery 简化版的懒加载方式
        $(function () {
            //alert('3')

            $('#show').css('backgroundColor','pink')
            var a = $("<a href='#'></a>")
            a.html('百度一下，就知道')
            a.attr('href','http://www.baidu.com')
            a.addClass('normal')
            //$('#show').append(a)
            console.log($('#show'))

            // jQuery 事件
            var btn = $('<button>点击隐藏</button>')
            var flag = false
            btn.click(function () {
                /*
                // $('#show').hide()
                flag = !flag
                if(flag){
                    $('#show').hide()
                    $(this).html('点击显示')
                }else {
                    $('#show').show()
                    $(this).html('点击隐藏')
                }
                */

                $('#show').toggle()

            })
            $('body').append(btn)

            // hover
            var src_w = $('img').eq(0).css('width')
            $('img').eq(0).css('border','1px solid red')
            var w_temp = 0
            $('img').eq(0).hover(function () {
                var width = $(this).css('width')
                width = parseInt(width)

                if (width <= 50){
                    w_temp = 50
                }else if(width >= parseInt(src_w)){
                    w_temp = -50
                }
                width += w_temp

                $(this).css('width',width + 'px')
            },function () {
                console.log('out 。。。。。')
            })

            $('#show').hover(function () {
                $(this).css('backgroundColor','red')
                //$('ul.users').eq(0).css('display','block')
                $('ul.users').eq(0).show(2000)
            },function () {
                $(this).css('backgroundColor','yellow')
                //$('ul.users').eq(0).css('display','none')
                $('ul.users').eq(0).hide('fast')
            })

            $('#show').click(function () {
                $('ul.users').eq(0).toggle()
            })
        })

    </script>
</body>
<script>
    /*
    //TODO: 封装方法 进行 DOM操作
    function $(selector) {
        var doms = document.querySelectorAll(selector)
        if (doms.length > 1){
            return doms
        }else if(doms.length === 1){
            return doms[0]
        }else {
            return null
        }
    }

    $('div')
    $('#show')
    var p = $('p')
    if (p){
        $('#show').style.backgroundColor = 'red'
    } else {
        $('#show').style.backgroundColor = 'yellow'
    }
    */

</script>

</html>